<!doctype html>
<html>
    <head>
        <title>HT 面板手册</title>
        <meta charset="UTF-8">    
        <meta name="viewport" content="user-scalable=yes, width=1024">
        <style type="text/css"> 
            h1, h2, h3, h4, h5, h6, p, blockquote {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
                font-size: 13px;
                line-height: 18px;
                color: #737373;
                background-color: white; 
                margin: 10px 13px 10px 13px;
            }
            table {
                margin: 10px 0 15px 0;
                border-collapse: collapse;
            }
            td,th {	
                border: 1px solid #ddd;
                padding: 3px 10px;
            }
            th {
                padding: 5px 10px;	
            }
            a {
                color: #0069d6;
            }
            a:hover {
                color: #0050a3;
                text-decoration: none;
            }
            a img {
                border: none;
            }
            p {
                margin-bottom: 9px;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #404040;
                line-height: 36px;
            }
            h1 {
                margin-bottom: 18px;
                font-size: 30px;
            }
            h2 {
                font-size: 24px;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                font-size: 13px;
            }
            hr {
                margin: 0 0 19px;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
            blockquote {
                padding: 13px 13px 21px 15px;
                margin-bottom: 18px;
                font-family:georgia,serif;
                font-style: italic;
            }
            blockquote:before {
                content:"\201C";
                font-size:40px;
                margin-left:-10px;
                font-family:georgia,serif;
                color:#eee;
            }
            blockquote p {
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                margin-bottom: 0;
                font-style: italic;
            }
            code, pre {
                font-family: Monaco, Andale Mono, Courier New, monospace;
            }
            code {
                background-color: #fee9cc;
                color: rgba(0, 0, 0, 0.75);
                padding: 1px 3px;
                font-size: 12px;
                border-radius: 3px;
            }
            pre {
                display: block;
                padding: 14px;
                margin: 0 0 18px;
                line-height: 16px;
                font-size: 11px;
                border: 1px solid #d9d9d9;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            pre code {
                background-color: #fff;
                color:#737373;
                font-size: 11px;
                padding: 0;
            }
            sup {
                font-size: 0.83em;
                vertical-align: super;
                line-height: 0;
            }
            * {
                -webkit-print-color-adjust: exact;
            }
            @media screen and (min-width: 914px) {
                body {
                    width: 854px;
                    margin:10px auto;
                }
            }
            @media print {
                body,code,pre code,h1,h2,h3,h4,h5,h6 {
                    color: black;
                }
                table, pre {
                    page-break-inside: avoid;
                }
            }                        
            iframe{
                width: 100%;
                border: 1px solid #34495E;
                margin: 0;                
            }            
            .logo{
                vertical-align: middle;
            }

        </style>        
        <script>
            function init() {
                var logoSrc = '',
                    logos = document.querySelectorAll('.logo'),
                    i = 0;
                for (; i < logos.length; i++) {
                    logos[i].src = logoSrc;
                }
                
                var iframes = document.querySelectorAll('iframe'),
                    func = function(){};
                for (i=0; i < iframes.length; i++) {
                    var iframe = iframes[i];
                    
                    // a small hack to make it work on android
                    iframe.ontouchstart = func;
                    
                    var div = document.createElement('div');
                    div.innerHTML = '<a href="' + iframe.src + '" target="_blank">独立运行→</a>';
                    iframe.parentNode.insertBefore(div, iframe);
                }   
            }
        </script>    
    </head>
    <body onload="init();">
        <a href="http://www.hightopo.com"><img class="logo"></a>HT 面板手册
        <hr style="margin: 1px 0 20px 0">
<p>索引</p>

<ul><li><a href="#ref_description">概述</a></li><li><a href="#ref_sample">示例</a></li><li><a href="#ref_flowlayout">流式布局</a></li><li><a href="#ref_customstyle">自定义样式</a></li></ul>

<hr/>

<div id="ref_description"></div>

<h3>概述</h3>

<p><code>ht.widget.Panel</code>面板是一种容器组件，面板内部可以放置<code>HTML</code>文本、<code>DOM</code>元素或<code>HT</code>组件，面板自身实现了子面板、拖拽位置、<code>resize</code>、吸附、成组，展开/合并、
最小化/恢复、流式布局等功能。</p>

<p>注意：此插件依赖<code>CSS动画</code>插件</p>

<p>在正式使用<code>API</code>之前，您的页面里应该引入相关的<code>js</code>：</p>

<pre><code>&lt;script src=&quot;ht.js&quot;&gt;&lt;/script&gt; &lt;!--先引入ht.js--&gt;
&lt;script src=&quot;ht-cssanimation.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;ht-panel.js&quot;&gt;&lt;/script&gt;</code></pre>

<p>面板的使用方法很简单，只需要创建出一个面板对象，在构造函数中传入一个<code>js</code>对象指定面板的配置参数，如标题、宽度、高度、内容等;也可以不在构造函数中指定，
面板创建完成后，调用<code>setConfig</code>可以实现同样的功能。可配置的参数如下：</p>

<ul><li><code>id</code> 面板唯一标识，如果为空，面板内部会自动生成一个唯一标识。如果要获取面板的状态，如是否展开等，需要指定此参数</li><li><code>title</code> 面板标题</li><li><code>titleBackground</code> 标题栏的背景颜色</li><li><code>separatorWidth</code> 内部面板之间分割线的宽度</li><li><code>separatorColor</code> 内部面板之间分割线的颜色</li><li><code>titleColor</code> 标题文本的颜色</li><li><code>borderWidth</code> 边框宽度</li><li><code>titleHeight</code> 标题栏的高度</li><li><code>titleIcon</code> 面板<code>icon</code>，可以为<code>url</code>或<code>base64</code>字符</li><li><code>titleIconSize</code> 标题栏中图片的尺寸，包括展开/合并图标、最小化图标及<code>titleIcon</code></li><li><p><code>buttons</code> 扩展标题栏中的按钮，此参数为一个数组，数组中元素可以是以下两个字符串：</p><ul><li><code>minimize</code> 最小化按钮</li><li><code>toggle</code> 展开/合并按钮</li><li><p><code>independentSwitch</code> 控制<code>independent</code>参数</p><p>也可以是<code>js</code>对象，表示自定义按钮，自定义按钮的参数如下：</p></li><li><code>name</code> 名称，唯一标识，请使用英文字母</li><li><code>icon</code> 按钮图片，可以为<code>url</code>或<code>base64</code>字符</li><li><code>toolTip</code> 鼠标悬停时的提示文本</li><li><p><code>action: function(paneConfig, panelView, e)</code> 点击时的回调函数</p></li></ul></li><li><p><code>minimizable</code> 面板是否可最小化，为<code>false</code>时表示面板不可最小化，默认为空</p></li><li><code>minimize</code> <code>已无效</code>，请使用<code>minimized</code></li><li><code>minimized</code> 面板是否最小化，为<code>true</code>时表示将面板最小化，默认为空</li><li><code>expand</code> <code>已无效</code>，请使用<code>expanded</code></li><li><code>expanded</code> 面板是否展开，为<code>false</code>时表示合并，否则展开，默认为空</li><li><code>narrowWhenCollapse</code> 如果为<code>true</code>合并面板时收缩宽度</li><li><code>exclusive</code> 此参数只在外层面板有效，表示是否只允许展开一个子面板，默认为<code>false</code></li><li><code>independent</code> 此参数只在内层面板有效，表示外层面板只允许展开一个子面板时，自身是否独立，换句话说，如果此参数为<code>true</code>，此子面板不受外层面板<code>exclusive</code>参数影响</li><li><code>toggleToolTip</code> 展开/合并按钮的<code>toolTip</code></li><li><code>restoreToolTip</code> 恢复按钮的<code>toolTip</code></li><li><code>content</code> 面板的内容，可以为<code>HTML</code>文本、<code>DOM</code>元素或<code>HT</code>组件</li><li><code>width</code> 指定面板的宽度，对于<code>HTML</code>文本或<code>DOM</code>元素可以不指定此参数，由<code>HTML</code>内容撑开面板;由于<code>HT</code>组件自身没有尺寸，所以如果<code>content</code>为<code>HT</code>组件，必须指定此参数</li><li><code>contentHeight</code> 指定面板内容的高度，对于<code>HTML</code>文本或<code>DOM</code>元素可以不指定此参数，由<code>HTML</code>内容撑开面板;由于<code>HT</code>组件自身没有尺寸，所以如果<code>content</code>为<code>HT</code>组件，必须指定此参数</li><li><code>resizeMode</code> 用户鼠标移动到面板右下角时可以<code>resize</code>面板，此参数控制<code>resize</code>模式：<code>w</code>表示只允许调整宽度，<code>h</code>表示只允许调整高度，<code>wh</code>表示宽高都允许调整，<code>none</code>表示不允许<code>resize</code></li><li><code>items</code> 此参数为一个数组，数组中每个<code>js</code>对象都表示一个子面板，子面板的配置参数如上。</li><li><code>flowLayout</code> 如果为<code>true</code>表示使用流式布局，在此布局下无法使用最小化，拖拽位置、吸附等功能。</li></ul>

<p>面板上提供了一些<code>API</code>用于设置或获取面板状态：</p>

<ul><li><code>setConfig(config)</code> 配置面板参数</li><li><code>getPanelConfig(id)</code> 根据<code>id</code>获得面板配置，在配置中可获得<code>width</code>、<code>contentHeight</code>、<code>expanded</code>等状态，只可查询，不可修改</li><li><code>getPanelView(id)</code> 根据<code>id</code>获得面板的<code>DIV</code></li><li><code>setInnerPanel(config)</code> 传入一个指定配置参数的<code>js</code>对象，如果对象的<code>id</code>与面板中某个子面板<code>id</code>重复则更新那个子面板，否则新增一个子面板</li><li><code>removeInnerPanel(id)</code> 根据<code>id</code>删除子面板</li><li><code>togglePanel(id)</code> 根据<code>id</code>切换面板状态(展开或合并)</li><li><code>dragContainment</code> 由<code>setDragContainment(value)</code>和<code>getDragContainment()</code>操作，表示是否限制在父容器中拖拽，默认为<code>parent</code>，改为<code>null</code>可取消限制</li><li><code>minimize()</code> 最小化面板</li><li><code>restore()</code> 将面板从最小化状态恢复</li><li><code>getView()</code> 获得面板<code>DIV</code></li><li><code>setPosition(x, y)</code> 设置面板在父容器中的位置</li><li><p><code>setPositionRelativeTo(relativeTo)</code> 设置面板相对父容器哪个角落定位，参数枚举如下：</p><ul><li><code>leftTop</code> 默认值，面板的<code>position</code>相对于左上角定位</li><li><code>leftBottom</code> 面板的<code>position</code>相对于左下角定位</li><li><code>rightTop</code> 面板的<code>position</code>相对于右上角定位</li><li><p><code>rightBottom</code> 面板的<code>position</code>相对于右下角定位</p><p>如果希望一个面板始终固定在父容器的右下角，调用下面的<code>API</code>即可：</p><pre><code>panel.setPositionRelativeTo(&#39;rightBottom&#39;);
panel.setPosition(0, 0);</code></pre></li></ul></li><li><p><code>addEventListener: function (listener, scope, ahead)</code> 增加事件监听，支持的事件类型：</p><ul><li><code>beginRestore</code> 开始恢复时触发</li><li><code>endRestore</code> 恢复结束后触发</li><li><code>beginMinimize</code> 开始最小化时触发</li><li><code>endMinimize</code> 最小化结束后触发</li><li><code>beginToggle</code> 开始合并或展开时触发</li><li><code>endToggle</code> 合并或展开结束后触发</li><li><code>beginResize</code> 开始<code>resize</code>时触发</li><li><code>betweenResize</code> 在<code>resize</code>过程中触发</li><li><code>endResize</code> <code>resize</code>结束后触发</li><li><code>beginMove</code> 开始移动时触发</li><li><code>betweenMove</code> 移动过程中触发</li><li><code>endMove</code> 移动结束后触发</li></ul></li><li><code>removeEventListener: function (listener, scope)</code> 删除事件监听</li></ul>

<p>此插件还提供了<code>ht.widget.PanelGroup</code>类用于实现面板的角落吸附和自动布局功能，如果需要这些功能，首先要创建一个<code>PanelGroup</code>:</p>

<pre><code>panelGroup= new ht.widget.PanelGroup({//在构造函数中指定吸附的面板之间的间隔
    hGap: 10,
    vGap: 10
});</code></pre>

<p> 然后通过<code>PanelGroup</code>的<code>API</code>对面板进行分组：</p>

<ul><li><code>add(panel)</code> 将参数中的面板加到此组中，注意，如果两个面板的父容器不一致，不要加到同一个分组中</li><li><code>setLeftTopPanels(panel1, panel2, ..., orientation)</code> 将参数中的多个面板加到此分组中，吸附到左上角并按顺序排列，最后一个参数为字符串，表示排列的方向，枚举值如下：<ul><li><code>h</code> 水平排列</li><li><code>v</code> 垂直排列</li></ul></li><li><code>setLeftBottomPanels(panel1, panel2, ..., orientation)</code> 将参数中的多个面板加到此分组中，吸附到左下角并按顺序排列</li><li><code>setRightTopPanels(panel1, panel2, ..., orientation)</code> 将参数中的多个面板加到此分组中，吸附到右上角并按顺序排列</li><li><code>setRightBottomPanels(panel1, panel2, ..., orientation)</code> 将参数中的多个面板加到此分组中，吸附到右下角并按顺序排列</li><li><code>remove(panel)</code> 将参数中的面板从分组中移除</li></ul>

<div id="ref_sample"></div>

<h3>示例</h3>

<p>接下来看一个例子：</p>

<p><iframe src="examples/example_sample.html" style="height:600px"></iframe></p>

<div id="ref_flowlayout"></div>

<h3>流式布局</h3>

<p>在需要大量输入的页面中，将表单分组并合并隐藏某些表单可以大幅节省页面空间，使用面板的流式布局很容易实现这种效果：</p>

<p><iframe src="examples/example_flowlayout.html" style="height:600px"></iframe></p>

<div id="ref_customstyle"></div>

<h3>自定义样式</h3>

<p>除了<code>概述章节</code>里提到配置参数，面板还支持使用全局的<code>htconfig</code>对象配置整体风格，可配置的参数如下：</p>

<ul><li><code>Color.titleIconBackground</code> 指定<code>HT</code>所有组件的标题<code>ICON</code>的颜色，如面板，对话框，<code>AccordionView</code>等</li><li><p><code>Color.titleBackground</code><code> 指定</code>HT<code>所有组件的标题栏的背景色，如面板，对话框，</code>AccordionView`等</p></li><li><p><code>Default.panelTitleLabelColor</code> 指定面板标题栏的文字颜色，默认为<code>Default.labelSelectColor</code></p></li><li><code>Default.panelTitleLabelFont</code> 指定面板标题栏的文字字体，默认为<code>Default.labelFont</code></li><li><code>Default.panelContentLabelFont</code> 指定面板内容区域的文字字体，默认为<code>Default.labelFont</code></li><li><code>Default.panelTitleBackground</code> 指定面板标题栏的背景色，默认为<code>Color.titleBackground</code></li><li><code>Default.panelSeparatorWidth</code> 指定内部面板之间分割线的宽度，默认为<code>1</code></li><li><code>Default.panelSeparatorColor</code> 指定内部面板之间分割线的颜色，默认为<code>undefined</code></li><li><code>Default.widgetTitleHeight</code> 指定面板标题栏的高度</li></ul>

<p>当全局风格配置与面板<code>API</code>配置冲突时，以后者为准。</p>

<p><iframe src="examples/example_customstyle.html" style="height:600px"></iframe></p>

<pre><code>&lt;script&gt;
    htconfig = {
        Color: {
            toolTipBackground: &#39;#DAECF4&#39;,
            titleBackground: &#39;#076186&#39;,
            titleIconBackground: &#39;white&#39;,
            headerBackground: &#39;#DAECF4&#39;,
            highlight: &#39;#4799BC&#39;,
        }
    };
&lt;/script&gt;</code></pre>    <hr id="contact" style="margin: 20px 0 1px 0">
    <a href="http://www.hightopo.com"><img class="logo"></a>欢迎交流 <a href="mailto:service@hightopo.com">service@hightopo.com</a>
</body>
</html>
